<template>
    <div>
	<div class="logo" id="logo-l"><span></span></div>
	<el-row>
		<el-col>
			<h1>{{welcome}}</h1>
		</el-col>
	</el-row>
	
	<el-row  id="input-bar">
		 <el-col :offset="6" :span="10">
		 	 <el-input :placeholder="input_placeholder" v-model="input_text"></el-input>
		 </el-col>

		 <el-col :span="5">
		 <el-button @click="submit" class="search-button">
        	     搜索
        	 </el-button>
		 </el-col>
	</el-row>


	<el-row type="flex" class="row-bg" justify="center">
	<el-col :offset="0" :span="10" v-if="tags && tags.length > 0">
        <tag v-for="tag in tags" :text="tag" :key="tag" @delete="onTagDelete"/>
        </el-col>
	</el-row>


	<el-row type="flex" class="row-bg" justify="center">
	<ResultPane v-for="contents in result" :content="contents.content" :key="contents.length"/>
        </el-row>
    </div>
</template>

<script>
// 引用其他JS文件中的函数
    import * as common from '@/utils/common'
    import Tag from '@/components/tag'
    import ResultPane from '@/components/ResultPane'
    export default {
        name: "Home",
	components: {
	    ResultPane,
	    Tag
        },
        data() {
            return {
                // 定义本页面中使用的全局变量
                'welcome': '考研资讯，快人一步',
                'result': [],
                'slider_value': 50,
                'today_time': 0,
                'number': 8,
		'tags': undefined,

                'input_placeholder': '',
                'input_text': ''
            }
        },
        // 定义函数
        methods: {
	    addTag(name) {
	    	console.log(this.tags)
                this.tags.push(name);
            },
            onTagDelete(tag) {
                // 从数组中移除。
                this.tags.splice(this.tags.indexOf(tag), 1);
            },
            submit() {
                // 发送的数据要符合接口要求
		var params = new URLSearchParams();
		params.append('context', this.input_text);
                this.$request.post('http://116.62.44.244:81/search/news', 
                    params
                ).then((response) => {
                    // 回调函数，获取后端返回的数据
		    this.result=response.data.news;
                    console.log(response.data);
                }).catch((error) => {
                    // 捕捉异常并抛出
                    console.log(error);
                })
		//this.addTag(this.input_text);
            }
        },

        // 具体详见vue的生命周期
        created() {
        }
    }
</script>

<style scoped>
 /*修饰页面组件*/
    h1 {
        text-align: center;
	font-size: 3rem;
	letter-spacing: -.015em;
	text-transform: none;
	line-height: 200px;
    }
    #input-bar {
	height: 65px;
	padding: 5px 10px;
	position: relative;
	//width: 519px;
	font-size: 12px;
	font-family: arial;
    }
    .content .logo {
	height: 100%;
	min-height: 181px;
	position: relative;
    }
    .search-button {
	background: #19b955;
	color: #fff;
    }
</style>